<template>
  <div class="form-wrap">
    <n-form
      :label-width="120"
      inline
      :model="form"
      size="large"
      ref="formRef"
      label-placement="left"
      class="inner-form-wrap"
    >
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="12" label="姓名" path="name">
          <n-input v-model:value="form.name" placeholder="请输入名称" />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="网址匹配规则" path="url">
          <n-input v-model:value="form.url" placeholder="请输入网址匹配规则" />
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="代码" path="url">
          <div ref="edit" class="edit"></div>
        </n-form-item-gi>
      </n-grid>
    </n-form>

    <div class="bottom-wrap">
      <n-button>返回</n-button>
      <n-button type="primary">保存</n-button>
    </div>
  </div>
</template>

<script lang="ts">
/* eslint-disable */
import { setLocaleData } from 'monaco-editor-nls'
import cn from 'monaco-editor-nls/locale/zh-hans.json'
setLocaleData(cn)
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
import { onMounted, defineComponent, ref } from 'vue'
import { NInput, NForm, NFormItemGi, NGrid, NButton } from 'naive-ui'

// monaco.editor.EditorOption.
//  availableLanguages: { '*': 'zh-cn' }
// node_modules\monaco-editor\min\vs\editor\editor.main.nls.zh-cn.js
// 代码提示方法(返回一个数组)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
// function createTips() {
//   return [
//     {
//       label: 'SetValue', // 显示的提示名称
//       insertText: 'SetValue("text")' // 选择后粘贴到编辑器中的文字
//     }
//   ]
// }

interface IFORM {
  name: string
  url: string
}

export default defineComponent({
  components: {
    NInput,
    NForm,
    NFormItemGi,
    NGrid,
    NButton
  },
  setup() {
    const edit = ref<HTMLElement | null>(null)
    const formRef = ref<HTMLElement | null>(null)
    const form = ref<IFORM>({
      name: '',
      url: ''
    })

    const initEdit = (dom: HTMLElement) => {
      import('monaco-editor/esm/vs/editor/editor.api')
        .then(monaco => {
          const instance = monaco.editor.create(dom, {
            value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
            language: 'javascript',
            minimap: {
              enabled: false
            },
            overviewRulerBorder: true,
            foldingStrategy: 'indentation',
            roundedSelection: true,
            // showFoldingControls: 'mouseover', // 显示折叠
            // selectOnLineNumbers: true,
            // roundedSelection: false,
            // cursorStyle: 'line', // 光标样式
            automaticLayout: true // 自动布局
            // glyphMargin: true, // 字形边缘
            // useTabStops: false,
            // fontSize: 16, // 字体大小
            // autoIndent: 'full' // 自动布局
          })
          console.log(instance)
        })
        .catch(err => {
          console.log(err)
        })

      // instance.languages.registerCompletionItemProvider('javscript', {
      //   provideCompletionItems(model, position) {
      //     // find out if we are completing a property in the 'dependencies' object.
      //     const textUntilPosition = model.getValueInRange({
      //       startLineNumber: 1,
      //       startColumn: 1,
      //       endLineNumber: position.lineNumber,
      //       endColumn: position.column
      //     })
      //     let suggestions = []
      //     // const word = model.getWordUntilPosition(position);
      //     // const range = {
      //     //   startLineNumber: position.lineNumber,
      //     //   endLineNumber: position.lineNumber,
      //     //   startColumn: word.startColumn,
      //     //   endColumn: word.endColumn
      //     // };

      //     if (textUntilPosition.charAt(textUntilPosition.length - 2) === '.') {
      //       suggestions = createTips()
      //     }
      //     return { suggestions }
      //   }
      // })
    }
    onMounted(() => {
      if (edit.value) {
        initEdit(edit.value)
      }
    })
    return { edit, form, formRef }
  }
})
</script>

<style lang="scss" scoped>
.form-wrap {
  width: calc(100% - 80px);
  height: calc(100vh - 40px);
  .inner-form-wrap {
    padding: 20px 40px;
  }
  .edit {
    width: 100vw;
    min-height: 600px;
    // border: 1px solid #ccc;
    border-radius: 4px;
  }
  .bottom-wrap {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding: 20px 0px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    button {
      margin-right: 10px;
    }
  }
}
</style>
